import { computed, type Ref, unref } from 'vue';
import { replace } from 'lodash-es';

export default function useComponentSize(cardSwiperShow: Ref<boolean>) {
  const ShowListHeight = 72;
  const CardSwiperHeight = 300;
  const FloatButtonPading = 30;
  const PixelUnit = 'rpx';

  /** 字符串样式转换为数字, 提供计算 */
  const stringStyleConverNumber = (styleItem: string) => {
    const n = replace(styleItem, PixelUnit, '');
    return Number(n) || 0;
  };

  /** 计算"回到当前定位"按钮的样式 */
  const getBacktoStartStyle = computed(() => {
    const bottom = stringStyleConverNumber(getShowListStyle.value.bottom);
    return {
      bottom: bottom + ShowListHeight + FloatButtonPading + PixelUnit,
      right: FloatButtonPading + PixelUnit,
    };
  });

  /** 计算"显示列表"按钮样式 */
  const getShowListStyle = computed((): { bottom: string; right: string } => {
    let bottom = CardSwiperHeight + FloatButtonPading;
    if (!unref(cardSwiperShow)) {
      bottom = FloatButtonPading;
    }
    return {
      bottom: bottom + PixelUnit,
      right: FloatButtonPading + PixelUnit,
    };
  });

  return {
    getBacktoStartStyle,
    getShowListStyle,
  };
}
